import React from 'react'
import {List,InputItem,WingBlank,WhiteSpace,Button} from 'antd-mobile'
import {connect} from 'react-redux'

import Logo from '../../components/logo/logo'
import {login} from '../../redux/loginAndReg'
import './login.css'



@connect(
    state => state,
    {
        login
    }
)
class Login extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            user: '',
            pwd: ''
        }
    }
    handleChange(key,val) {
        this.setState({
            [key]: val
        })
    }
    handleLogin() {
        this.props.login(this.state)
    }
    register() {
        this.props.history.push('/register')
    }
    render() {
        console.log(this.props)
        return (
            <div>
                <Logo />
                <WingBlank>
                    {this.props.loginAndReg.msg ? <p className="msg">{this.props.loginAndReg.msg}</p> : ''}
                    <List>
                        <InputItem
                            placeholder="请输入用户名"
                            onChange={value=>this.handleChange('user',value)}
                        >用户</InputItem>
                        <InputItem
                            type = 'password'
                            placeholder='请输入密码'
                            onChange={value=>this.handleChange('pwd',value)}
                        >密码</InputItem>
                    </List>
                    <WhiteSpace />
                    <div className="forgetPwd">
                        <span>忘记密码</span>
                    </div>
                    <WhiteSpace />
                    <Button type="primary" onClick={this.handleLogin.bind(this)}>登录</Button>
                    <WhiteSpace />
                    <Button type="primary" onClick={this.register.bind(this)}>注册</Button>
                </WingBlank>
            </div>
        )
    }
}

export default Login